<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/common/vue/vue.js"></script>
</head>
<body>
----------------------------------单个复选框-------------------------------------------------
<div id="app">
    <label for="agee"><!-- 点字也可以选中复选框-->
        <input type="checkbox" id="agee" v-model="constent" > 同意
    </label>
    <br>
    <button v-bind:disabled="!constent">下一步</button>
    <br>
    <h2>{{constent}}</h2>
</div>
---------------------------------------多个复选框------------------------------------------
<div id="app2">
   <input type="checkbox" value="选项一" v-model="result">选项一
    <input type="checkbox" value="选项二" v-model="result">选项二
    <input type="checkbox" value="选项三" v-model="result">选项三
    <input type="checkbox" value="选项四" v-model="result">选项四
<br>
    <h2>{{result}}</h2>
</div>
---------------------------------------v-model 修饰符 lazy（懒加载）  number（转换为数字）  trim ------------------------------------------
<div id="app3">
<!--
lazy：只有输入框在失去焦点时才加载。
number：vue默认传的都是字符串，修饰后悔转换成数字存，当输入的是数字加字符串时，字符串会自动过滤。
trim ：过去用户输入内容的收首尾空格。
-->
    懒加载：<input type="text" v-model.lazy="result"><h2>{{result}}</h2>
    正常：<input type="text" v-model="result2"><h2>{{result2}}</h2>
    <br>
<!--    懒加载 input失去焦点时才加载    -->
    <input type="" v-model.number="">
</div>
<script>
    const  app = new Vue({
        el:'#app',
        data:{
            message:"提示",
            constent:false
        }
    })
    const  app2 = new Vue({
        el:'#app2',
        data:{
            array:['q','w','e','f','h','l'],
            result:[]
        }
    })
    const  app3 = new Vue({
        el:'#app3',
        data:{
            array:['q','w','e','f','h','l'],
            result:'',
            result2:''
        }
    })
</script>
</body>
</html>